<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
        <el-form-item label="园所名称" prop="schoolName">
          <el-input v-model="queryParams.schoolName" placeholder="请输入园所名称" @input="handleInput" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="年级" prop="year">
          <el-select v-model="queryParams.year" clearable placeholder="请选择年级"  >
            <el-option v-for="dict in gradeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入学生姓名" @input="handleStudednt"   maxlength="25" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      </el-form>
      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['student:studentCheck:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['student:studentCheck:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['student:studentCheck:import']">导入</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['student:studentCheck:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row> -->
  
      <el-table v-loading="loading" :data="studentCheckList" >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
        <el-table-column label="园所名称" align="center" prop="schoolName" />
        <el-table-column label="学生姓名" align="center" prop="name" />
        <el-table-column label="年级" align="center" prop="year" :formatter="gradeTypeFormat" />
        <!-- <el-table-column label="班级" align="center" prop="className" /> -->
        <el-table-column label="身份证" align="center" prop="idcard" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="年龄" align="center" prop="type"  /> -->
        <el-table-column label="性别" align="center" prop="sex"  :formatter="sexFormat" />
        <!-- <el-table-column label="入学时间" align="center" prop="studydate" /> -->
        <el-table-column label="家长姓名" align="center" prop="jzxm" />
        <el-table-column label="家长电话" align="center" prop="jzdh" />
        <el-table-column label="病史" align="center" prop="medicalHistory" />
        <el-table-column label="过敏史" align="center" prop="allergicHistory" />
        <el-table-column label="接种信息" align="center" prop="vaccinationIf" />
        <el-table-column label="家庭地址" align="center" prop="jtzz"  />
        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['student:studentCheck:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['student:studentCheck:remove']">删除</el-button>
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row)" >详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" 
        @pagination="getList" />
  
      <!-- 在园幼儿信息详情 -->
      <el-dialog title="在园幼儿信息详情" :visible.sync="open" width="700px" append-to-body>
           <el-descriptions title=""  :column="2">
               <el-descriptions-item label="姓名">{{ childrenData.name }}</el-descriptions-item>
               <!-- <el-descriptions-item label="年龄">{{ childrenData.age }}</el-descriptions-item> -->
               <el-descriptions-item label="性别" >{{ childrenData.sex }}</el-descriptions-item>
               <el-descriptions-item label="年级">{{ childrenData.year }}</el-descriptions-item>
               <el-descriptions-item label="班级">{{ childrenData.class }}</el-descriptions-item>
               <el-descriptions-item label="家长姓名">{{ childrenData.jzxm }}</el-descriptions-item>
               <el-descriptions-item label="家长电话">{{ childrenData.jzdh }}</el-descriptions-item>
               <el-descriptions-item label="家庭地址" :span='2' >{{childrenData.jtzz }}</el-descriptions-item>
               <el-descriptions-item label="病史" :span='2' >{{ childrenData.medicalHistory }}</el-descriptions-item>
               <el-descriptions-item label="过敏史" :span='2' >{{ childrenData.allergicHistory }}</el-descriptions-item>
               <el-descriptions-item label="接种信息" :span='2' >{{ childrenData.vaccinationIf }}</el-descriptions-item>
               <!-- <el-descriptions-item label="备注">
                备注信息
               </el-descriptions-item> -->
               <!-- <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> -->
           </el-descriptions>
          <!-- <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div> -->
      </el-dialog>
    </div>
  </template>
  
  <script>
    import { studentlist} from "@/api/qu/yexxgl";
    import { selectRoom } from "@/api/base/room";
    import { getToken } from "@/utils/auth";
    import { selectStudent } from "@/api/base/student";
  
    export default {
      name: "",
      data() {
        return {
          studentType:'',
          childrenData:{
            name:'张三',age:'5',sex:'男',class:'小二班',father:'张一',mother:'王五',medicalHistory:'关于病史的信息'
          },
          // 遮罩层
          loading: true,
          // 选中数组
          total: 0,
          // 宿舍数据
          roomList: [],
          queryRoomList: [],
          //学生数据
          studentList: [],
          gradeOptions:[],
          // 宿舍考勤表格数据
          studentCheckList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            schoolName: null,
            year:'',
            name: null,
            type: null,
          },
        };
      },
      created() {
        this.getDicts("sys_user_sex").then(response => {
           this.sexOptions = response.data;
         });
        this.getDicts("student_type").then(response => {
           response.data.forEach(item => {
             if(item.dictLabel=='在园幼儿') 
            this.studentType=item.dictValue;
           });
           this.getDicts("year_type").then(response => {
          this.gradeOptions = response.data;
        });
           this.getList();
        });
      },
      methods: {
         // 序号
         customeIndex(index){
           return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
        },
        /** 在园幼儿列表 */
        async  getList() {
          this.loading = true;
          try {
            const obj = {
              type:this.studentType,
              schoolName:this.queryParams.schoolName,
              year:this.queryParams.year,
              name:this.queryParams.name,
              pageNum: this.queryParams.pageNum,
              pageSize:this.queryParams.pageSize,
            }
             const data=  await studentlist(obj);
             this.studentCheckList=data.rows;
             this.total=data.total
             this.loading = false;
          } catch (error) {
            console.log(error);
          }
        },
         // 性别字典翻译
       sexFormat(row, column) {
         return this.selectDictLabel(this.sexOptions, row.sex);
       },
          // 年级字典翻译
        gradeTypeFormat(row, column) {
            return this.selectDictLabel(this.gradeOptions, row.year);
         },
         handleInput(val){
           let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g // 特殊字符正则
           let regkg = /[ ]/g// 空格正则
           this.queryParams.schoolName = val.replace(regtszf, '').replace(regkg, '')
         },
         handleStudednt(val){
          let regkg = /[ ]/g// 空格正则
          this.queryParams.name = val.replace(regkg, '')
         },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            id: null,
            stuId: null,
            batchs: null,
            roomId: null,
            checkDate: null,
            addUser: null,
            addTime: null,
            type: null,
            comment: null
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.id)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        },
       
       
        //详情
        handleDetails(item){
            this.childrenData=item
            this.open=true
            console.log('详情');
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有宿舍考勤数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportStudentCheck(queryParams);
          }).then(response => {
            this.download(response.msg);
          })
        },
        /** 导入按钮操作 */
        handleImport() {
          this.upload.title = "宿舍考勤导入";
          this.upload.open = true;
        },
        /** 下载模板操作 */
        importTemplate() {
          importTemplate().then(response => {
            this.download(response.msg);
          });
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
          this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
          this.upload.open = false;
          this.upload.isUploading = false;
          this.$refs.upload.clearFiles();
          this.$alert(response.msg, "导入结果", {
            dangerouslyUseHTMLString: true
          });
          this.getList();
        },
        // 提交上传文件
        submitFileForm() {
          this.$refs.upload.submit();
        }
      }
    };
  </script>
  